<apes-header>
</apes-header>

<apes-content [apesPrefixCls]="'apes-vehicle-control'">
<!--  <apes-card [apesTitle]="'车辆总控'">-->

<!--    -->
<!--  </apes-card>-->

  <div class="apes-vehicle-control">

    <div class="assistant-carControl">

      <div apes-row>
        <div apes-col [apesSpan]="showCarMore? 12 : 24" class="assistant-carControl-left">

          <!--查询区-->
          <div apes-row [apesGutter]="16" style="padding: 4px 4px 4px 16px;">
            <formly-form [model]="carControlModel" [fields]="carControlField"></formly-form>
            <div apes-col [apesSpan]="4">
              <button apes-button [apesSize]="'default'"
                      [apesLoading]="carControlLoading"
                      (click)="refreshCarControlItem()">查询
              </button>
            </div>
          </div>

          <!--展示区-->
          <div apes-row [apesGutter]="16">
            <div *ngFor="let total of carControlTotal; let i = index;"
                 apes-col [apesSpan]="6">
              <div class="assistant-carControl-total" (click)="filterCarControlItem(carControlTotal,i)"
                   [ngClass]="{'activate': total['activate']}"
                   [ngStyle]="{'color':checkCarState(total.remark)}">
                <div>{{total.remark}}</div>
                <div>{{total.TOTAL}}</div>
              </div>
            </div>
          </div>

          <div class="assistant-carControl-container">
            <ng-container *ngIf="showCarControlItem.length != 0">
              <div *ngFor="let car of showCarControlItem;let i = index;"
                   class="assistant-carControl-item"
                   [ngClass]="{'showCarMore':showCarMore}">
                <div class="assistant-carControl-main">

                  <div class="assistant-carControl-title">
                    <div class="carControl-title-left">
                      <div class="carControl-car-logo">
                        <img [src]="car.logo" alt="">
                      </div>
                      <div class="carControl-car-title">
                        <span class="carControl-car-license">{{car.CAR_LICENSE}}</span>
                        <span class="carControl-customer-name">{{car.CUSTOMER_NAME}}</span>
                        <div class="carControl-btn">
                          <button apes-button [apesSize]="'default'" (click)="carMoreBtn(car)">
                            到店记录详情
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="carControl-title-right">
                      <apes-tag [apesColor]="checkCarState(car.STATE)">{{car.STATE}}</apes-tag>
                    </div>
                  </div>

                  <div class="assistant-carControl-content">
                    <p class="p-text">
                      <i apes-icon apesType="user" class="carControl-content-icon"></i>
                      接车：{{car.GET_CAR_DATE}}
                    </p>
                    <p class="carControl-dept p-text">
                          <span>
                            <i apes-icon apesType="home" class="carControl-content-icon"></i>
                            门店：{{car.DEPT}}
                          </span>
                      <span>
                            <i apes-icon apesType="history" class="carControl-content-icon"></i>
                        {{car.timeConsume}}
                          </span>
                    </p>
                  </div>


                  <div class="assistant-carControl-footer">

                    <div *ngIf="car['cardDetail'] && car.cardDetail.length != 0 && !checkCarShowData(car)"
                         class="carControl-footer-main" [ngClass]="{'showCar':!checkCarShowData(car)}">
                      <div *ngFor="let card of car.cardDetail" class="footer-main">
                        <div class="carControl-card-logo">
                          <img [src]="checkCardImg(card.PLAN_STATE)" alt="">
                        </div>

                        <div class="carControl-card-main">

                          <div class="card-main-top">
                            <div class="card-main">
                              <div>{{card.ID}}</div>
                              <div class="card-main-state">
                                <apes-tag [apesColor]="checkCardState(card.STATE_COLOR)">{{card.STATE}}</apes-tag>
                                <ng-container *ngFor="let tab of card.TAB;let i = index">
                                  <apes-tag *ngIf="i <= 3" [apesColor]="'#fff'"
                                            class="card-main-tab">{{tab}}</apes-tag>
                                </ng-container>
                              </div>
                            </div>
                            <div class="card-amount">¥{{card.TOTAL_AMOUNT}}</div>
                          </div>

                          <div class="card-main-bottom">创建时间：{{card.CREATE_DATE}}</div>

                        </div>
                      </div>
                    </div>

                    <div *ngIf="!car.hasOwnProperty('msg')"
                         [ngClass]="{'showCar':!checkCarShowData(car)}"
                         class="carControl-showMore">
                      <div *ngIf="checkCarShowData(car)" (click)="carShowMore(car)"
                           class="carControl-showMore-btn">
                        <span>预览</span>
                        <i apes-icon [apesType]="'double-right'" [apesRotate]="90"></i>
                      </div>
                      <div *ngIf="!checkCarShowData(car)" (click)="carShowMore(car)"
                           class="carControl-showMore-btn">
                        <span>收起</span>
                        <i apes-icon [apesType]="'double-left'" [apesRotate]="90"></i>
                      </div>
                    </div>

                    <div *ngIf="car.hasOwnProperty('msg')" class="carControl-msg">
                      <div class="carControl-msg-img">
                        <img [src]="checkCarMsg(car.msg)" alt="">
                      </div>
                      <ng-container *ngIf="car.msg == '暂时没有业务。如需做单请开单!'">
                        <div class="carControl-msg-text">
                          暂时没有业务。如需做单“
                          <span (click)="openToBill(car)">请开单</span>
                          ”!
                        </div>
                      </ng-container>
                      <ng-container *ngIf="car.msg == '你太棒了，此车业务已处理完毕，赶紧通知客户取车吧！'">
                        <div class="carControl-msg-text">{{car.msg}}</div>
                      </ng-container>

                    </div>
                  </div>

                </div>
              </div>
            </ng-container>
            <ng-container *ngIf="showCarControlItem.length == 0">
              <apes-empty style="text-align: center"></apes-empty>
            </ng-container>
          </div>

        </div>

        <dialog-carControl *ngIf="showCarMore" apes-col [apesSpan]="12"
                           class="assistant-carControl-right"
                           (closeDialog)="closeCarMore($event)"
                           [data]="carMoreData"></dialog-carControl>

      </div>
    </div>

  </div>

</apes-content>


